<template>
  <div>
    <AttendanceHeader :profile-name="msg" :profile-image-url="url" :dayInfo="timeinfo"></AttendanceHeader>
    <div class="records-content">
        <ul>
            <li>
                <img src="http://owtz12sxf.bkt.clouddn.com/05.jpg" alt="">
                <div class="up">
                    <span>杨翎子</span>
                    <span class="smaller">出勤率<em class="bluefont">80%</em></span>
                </div>
                <div class="down">
                    <span><em class="bluefont">15</em>次签到</span>
                    <span><em class="redfont">1</em>次异常</span>
                    <span><em class="grayfont">0</em>次早退</span>
                    <span><em class="redfont">3</em>次迟到</span>
                </div>
                <svg class="icon arrow" aria-hidden="true">
                    <use xlink:href="#icon-right-arrow"></use>
                </svg>
            </li>
            <li>
                <img src="http://owtz12sxf.bkt.clouddn.com/07.jpg" alt="">
                <div class="up"> 
                    <span>苍小贝</span>
                    <span class="smaller">出勤率<em class="bluefont">80%</em></span>
                </div>
                <div class="down">
                    <span><em class="bluefont">15</em>次签到</span>
                    <span><em class="redfont">1</em>次异常</span>
                    <span><em class="grayfont">0</em>次早退</span>
                    <span><em class="redfont">3</em>次迟到</span>
                </div>
                <svg class="icon arrow" aria-hidden="true">
                    <use xlink:href="#icon-right-arrow"></use>
                </svg>
            </li>
            <li>
                <img src="http://owtz12sxf.bkt.clouddn.com/04.jpeg" alt="">
                <div class="up"> 
                    <span>周顾倾</span>
                    <span class="smaller">出勤率<em class="bluefont">80%</em></span>
                </div>
                <div class="down">
                    <span><em class="bluefont">15</em>次签到</span>
                    <span><em class="redfont">1</em>次异常</span>
                    <span><em class="grayfont">0</em>次早退</span>
                    <span><em class="redfont">3</em>次迟到</span>
                </div>
                <svg class="icon arrow" aria-hidden="true">
                    <use xlink:href="#icon-right-arrow"></use>
                </svg>
            </li>
            <li>
                <img src="http://owtz12sxf.bkt.clouddn.com/09.jpg" alt="">
                <div class="up"> 
                    <span>苍小贝</span>
                    <span class="smaller">出勤率<em class="bluefont">80%</em></span>
                </div>
                <div class="down">
                    <span><em class="bluefont">15</em>次签到</span>
                    <span><em class="redfont">1</em>次异常</span>
                    <span><em class="grayfont">0</em>次早退</span>
                    <span><em class="redfont">3</em>次迟到</span>
                </div>
                <svg class="icon arrow" aria-hidden="true">
                    <use xlink:href="#icon-right-arrow"></use>
                </svg>
            </li>
        </ul>
        <p v-for ="x in 50 " :key="x">{{x}}</p>
    </div>
    </div>
</template>
<script>
import AttendanceHeader from "../component/header.vue";
export default {
  name: "a--profile--overview",
  components: {
    AttendanceHeader
  },
  data() {
    return {
      msg: "hzz",
      url: "http://owtz12sxf.bkt.clouddn.com/01.jpg",
      timeinfo: "2017-13",
      allAttendance: 17,
      lateCount: 1,
      missCard: 2,
      outerAttendance: 3,
      AttendancePercentage: 80
    };
  }
};
</script>

